<template>
  <div class="home">
  	<el-row>
  		<el-col :span='5' class="function-list" id="function-list">
  			<div class="mytitle"> Functions</div>
  			<ul>
		      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
		      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
		      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
		      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
		      
		      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
		    </ul>
  		</el-col>

  		<el-col :span='19' class="detail">
    		<div class="mytitle">Detail</div>

  		</el-col>
  	</el-row>

  </div>
</template>

<script>

export default {
  name: 'home',
  mounted:function(){
  	var functionHeight=document.body.clientHeight;
  	console.log(functionHeight);
  	document.getElementById('function-list').style.height=functionHeight+'px';
  },

  
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.function-list{

		background-color: #F9FAFC;
		border-right: 1px solid #C0CCDA;

	}
	
	.function-list ul{
		list-style-type: none;
		margin: 0;
		padding: 0;
 		line-height: 3em;

	}

	.function-list li {
		/*float:left;*/
		display: block; 
		text-align: left;
  		/*display: inline-block;*/
  		margin: 0 10px;
	    /*border-bottom:solid 1px #ccc; */
	}

	.function-list li a{
		text-decoration: none;
	}

	
	.mytitle{
	/*height: 20px;*/
	border-bottom: 1px solid #D3DCE6;
	background-color: #F9FAFC;
	padding: 10px;
}
</style>
